<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
        body {
            background: #E8EADD;
            color: #3C323A;
            padding: 20px;
        }
        
        .wrapper {
            width: 1024px;
            /* Fallback for browsers that don't support the calc() function */
            width: -moz-calc(100% - 40px);
            width: -webkit-calc(100% - 40px);
            width: calc(100% - 40px);
            margin: auto;
        }
        
        #header {
            background: #f60;
            padding: 20px;
            width: 984px;
            /*Fallback for browsers that don't support the calc() function*/
            width: -moz-calc(100% - 40px);
            width: -webkit-calc(100% - 40px);
            width: calc(100% - 40px);
        }
        
        #main {
            border: 8px solid #B8C172;
            float: left;
            margin-bottom: 20px;
            margin-right: 20px;
            padding: 20px;
            width: 704px;
            /* Fallback for browsers that don't support the calc() function */
            width: -moz-calc(75% - 20px * 2 - 8px * 2);
            width: -webkit-calc(75% - 20px * 2 - 8px * 2);
            width: calc(75% - 20px * 2 - 8px * 2);
        }
        
        #accessory {
            border: 8px solid #B8C172;
            float: right;
            padding: 10px;
            width: 208px;
            /* Fallback for browsers that don't support the calc() function */
            width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
            width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
            width: calc(25% - 10px * 2 - 8px * 2 - 20px);
        }
        
        #footer {
            clear: both;
            background: #000;
            padding: 20px;
            color: #fff;
            width: 984px;
            /* Fallback for browsers that don't support the calc() function */
            width: -moz-calc(100% - 40px);
            width: -webkit-calc(100% - 40px);
            width: calc(100% - 40px);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="header">
            <h1>CSS3 calc() Function</h1>
        </div>
        <div id="main">
            <h1>Far far away…</h1>
            <p>Far far away, behind the word mountains…</p>
        </div>

        <div id="accessory">
            <ul>
                <li><a href="#">Far far away…</a></li>
                <li><a href="#">Separated they live…</a></li>
                <li><a href="#">A small river named…</a></li>
            </ul>
        </div>

        <div id="footer">
            Visit the article…
        </div>

    </div>
</body>

</html>
